import React, { Component } from 'react';
import {StyleSheet, Text, View, TouchableOpacity, Image, FlatList, StatusBar, TextInput, ScrollView, Picker, DeviceEventEmitter} from 'react-native';
import { base } from "../../../assets/style";
import LinearGradient from "react-native-linear-gradient";
import ReactNativePickerSelect from 'react-native-picker-select'
import { DeviceStorage } from "../../../utils/DeviceStorage";
import { i18n } from "../../../utils/locales/i18n";

type Props = {};
export default class Language extends Component<Props> {
    static navigationOptions = ({ navigation }) => {
        return{
            headerTitle: i18n.t('lan'),
            headerStyle: {
            },
            headerTintColor: '#0f0f0f',
            headerBackTitle: null
        }
    };
    constructor() {
        super();
        this.state = {
        }
    }
    componentWillMount(): void {
        // I18n.locale = 'tw'
    }

    changeLanguage = (lang) => {
        if (lang === i18n.locale) return
        i18n.locale = lang
        // setTimeout(() => {
        //     this.props.navigation.navigate('Login')
        // }, 1000)
        this.forceUpdate()
        // console.log(111)
        DeviceStorage.set('lang', lang).then(() => {
            DeviceEventEmitter.emit('reloadApp')
            this.props.navigation.navigate('LoginScreen')
        })
    }

    render() {
        return (
            <View style={[base.flex_1, base.content_container]}>
                <TouchableOpacity onPress={() => this.changeLanguage('zh')}>
                    <View style={[base.flex_row_between, base.bg_white, { height: 45, borderBottomColor: '#eee', borderBottomWidth: 1 }]}>
                        <View style={[base.flex_row_start]}>
                            <Text style={{ color: i18n.locale === 'zh' ? '#ff7606' : '#808080' }}>简体中文</Text>
                        </View>
                        { i18n.locale === 'zh' ? (
                            <View style={[base.flex_row_end]}>
                                <Image style={[{width: 10, height: 10}]} source={require('@images/mine/tick.png')}></Image>
                            </View>
                        ) : null }
                    </View>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => this.changeLanguage('tw')}>
                    <View style={[base.flex_row_between, base.bg_white, { height: 45, borderBottomColor: '#eee', borderBottomWidth: 0.5 }]}>
                        <View style={[base.flex_row_start]}>
                            <Text style={{ color: i18n.locale === 'tw' ? '#ff7606' : '#808080' }}>繁体中文</Text>
                        </View>
                        { i18n.locale === 'tw' ? (
                            <View style={[base.flex_row_end]}>
                                <Image style={[{width: 10, height: 10}]} source={require('@images/mine/tick.png')}></Image>
                            </View>
                        ) : null }
                    </View>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => this.changeLanguage('en')}>
                    <View style={[base.flex_row_between, base.bg_white, { height: 45, borderBottomColor: '#eee', borderBottomWidth: 0.5 }]}>
                        <View style={[base.flex_row_start]}>
                            <Text style={{ color: i18n.locale === 'en' ? '#ff7606' : '#808080' }}>English</Text>
                        </View>
                        { i18n.locale === 'en' ? (
                            <View style={[base.flex_row_end]}>
                                <Image style={[{width: 10, height: 10}]} source={require('@images/mine/tick.png')}></Image>
                            </View>
                        ) : null }
                    </View>
                </TouchableOpacity>
            </View>
        )
    }
}

const styles = StyleSheet.create({
});
